<template>
  <el-dialog
      title="详情"
      custom-class="x-large-dialog"
      :visible="visible"
      append-to-body
      @open="open"
      @close="close"
  >
    <div class="detail-pannel">
      <el-form>
        <div class="group-title">房东信息</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户名称：">{{owner.userName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户昵称：">{{owner.nickName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间:">{{owner.createdAt | timeFilter}}</el-form-item>
          </el-col>
        </el-row>
        <div class="group-title">房屋信息</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="房屋标题：">{{house.name}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在地区：">{{house.name}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="租金：" prop="rent">{{house.rent}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="房屋描述：">{{house.description}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="地址：">{{house.address}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="地图定位：">
              <map-location :marker="{ lon: house.lon, lat: house.lat }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="advantage">
          <el-col :span="18">
            <el-form-item label="房屋特点：">
              <el-tag type="info" v-for="item in advantage" :key="item.id">{{item.name}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="device">
          <el-col :span="18">
            <el-form-item label="房屋设备：">
              <div v-for="item in device" :key="item.id">
                {{item.name}}
                <p v-if="item.children && item.children.length">
                  <el-tag type="info" v-for="item1 in item.children" :key="item1.id">{{item1.name}}</el-tag>
                </p>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="group-title">房屋详细信息</div>
        <el-row>
          <el-col v-if="detailData.pictures" :span="12">
            <el-form-item label="房屋图片：">
              <el-image v-for="item in detailData.pictures.split('|')" :key="item" :src="item" style="width: 60px;height: 60px" />
            </el-form-item>
          </el-col>
          <el-col v-if="detailData.houseArea" :span="6">
            <el-form-item label="房屋面积：">{{detailData.houseArea}}（平方米）</el-form-item>
          </el-col>
          <el-col v-if="detailData.houseArea" :span="6">
            <el-form-item label="房屋楼层：">{{detailData.floor}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="detailData.type" :span="6">
            <el-form-item label="房型：">{{detailData.type}}</el-form-item>
          </el-col>
          <el-col v-if="detailData.personNum" :span="6">
            <el-form-item label="宜居人数：">{{detailData.personNum}}人</el-form-item>
          </el-col>
          <el-col v-if="detailData.direction" :span="6">
            <el-form-item label="朝向：">{{detailData.direction}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="detailData.remarks" :span="18">
            <el-form-item label="备注：">{{detailData.remarks}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="detailData.content" :span="18">
            <el-form-item label="房屋描述：">{{detailData.content}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="agree">同 意</el-button>
      <el-button type="primary" @click="disagree">拒 绝</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _agree, _disAgree, _getDetail } from '../src/store'
import { detailDialog, examineMixin } from '@/mixins'

export default {
  name: 'detailDialog',
  mixins: [detailDialog, examineMixin],
  data() {
    return {
      detailData: {},
      detailFunc: _getDetail,
      agreeFunc: _agree,
      disagreeFunc: _disAgree
    }
  },
  computed: {
    house() {
      return this.detailData?.house || {}
    },
    owner() {
      return this.detailData?.house?.Owner || {}
    },
    advantage() {
      return this.detailData?.advantage
    },
    device() {
      return this.detailData?.device
    }
  }
}
</script>

<style scoped>

</style>

